{% extends 'loyout.html' %}
{% block html %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css" />

    </head>
    <body>
            <div>
                <div style="margin: 10px 0;">
                    <a class="btn btn-primary" href="/add_class/">添加</a>
                    <a class="btn btn-info" onclick="showModal();">对话框添加</a>
                </div>
                <table class="table table-striped table-bordered table-hover" >
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>班级名称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in class_list %}
                            <tr>
                                <td>{{ row.id }}</td>
                                <td>{{ row.title }}</td>
                                <td>
                                    <a class="glyphicon glyphicon-pencil" href="/edit_class/?nid={{ row.id }}"></a>
                                    |
                                    <a class="glyphicon glyphicon-hourglass" onclick="modelEdit(this);">对话框编辑</a>
                                    |
                                    <a class="glyphicon glyphicon-minus" onclick="modelDel(this);">对话框删除</a>
                                    |
                                    <a class="glyphicon glyphicon-trash" href="/del_class/?nid={{row.id}}"></a>


                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <!--对话框添加-->
            </div>
            <div id="shadow" class="shadow hide"></div>
            <div id="modal" class="modal1 hide">
                <p>
                    <input id="title" type="text" name="title" /><span id="errormsg"></span>
                </p>
                <input type="button" value="提交" onclick="AjaxSend();" />
                <input type="button" value="取消" onclick="cancleModal();" />
            </div>
            <!--对话框编辑-->
              <div id="editModal" class="modal1 hide">
                  <h3>编辑框</h3>
                <p>
                    <input id="editId" type="text" name="id" style="display: none">
                    <input id="editTitle" type="text" name="title" />
                </p>
                <input type="button" value="提交" onclick="editAjaxSend();" />
                <input type="button" value="取消" onclick="cancleModal();" />
            </div>
            <!--对话框删除-->
            <div id="DelModal" class="modal1 hide">
                  <h3>删除班级</h3>
                <p>

                    <input id="delTitle" type="text" name="title" />
                </p>
                <input type="button" value="删除" onclick="delAjaxSend();" />
                <input type="button" value="取消" onclick="cancleModal();" />
            </div>

    </body>
    </html>
{% endblock %}
{% block css %}
     <!--用于隐藏的.hide-->
        <style>
            .hide{
                display: none;
            }
            .shadow{
                position: fixed;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: black;
                opacity: 0.4;
                z-index: 999;
            }
            .modal1{
                z-index: 1000;
                position: fixed;
                left:50%;
                top: 50%;
                height: 300px;
                width: 400px;
                background-color: white;
                margin-left: -200px;
                margin-top: -150px;
            }
            span{
                color: red;
            }
        </style>
{% endblock %}
{% block js %}
     <!--提交表单-->
            <script src="/static/jquery-3.5.1.js"></script>
            <script>
                //显示标签
                function showModal() {
                    document.getElementById('shadow').classList.remove('hide');
                    document.getElementById('modal').classList.remove('hide');

                }
                //隐藏标签
                function cancleModal() {
                    document.getElementById('shadow').classList.add('hide');
                    document.getElementById('modal').classList.add('hide');
                    document.getElementById('editModal').classList.add('hide');
                    document.getElementById('DelModal').classList.add('hide');

                }
                //客户端点击响应执行此函数
                function AjaxSend() {
                    $.ajax({
                        //服务器的url以及请求和客户输入的值
                        url:'/modal_add_class/',
                        type:'POST',
                        data:{'title':$('#title').val()},
                        success:function (data) {
                            // 当服务段处理完成后,返回数据的时,该函数自动调用
                            //data=服务端返回的值
                            //返回数据给后台
                            console.log(data);
                            //返回数据给后台后，等待后台反应
                            //如果返回ok代表成功跳转回页面
                            if(data=="ok"){
                                //跳转
                                location.href="/classes/"
                            //不然是失败,发生提示
                            }else{
                                //如果客户端发生字符为空则给出提示
                                $('#errormsg').text(data);
                            }

                        }
                    })

                }
                    document.getElementById('shadow').classList.add('hide');
                    document.getElementById('modal').classList.add('hide');


                function modelEdit(ths) {
                    document.getElementById('shadow').classList.remove('hide');
                    document.getElementById('editModal').classList.remove('hide');
                    var row = $(ths).parent().prevAll();
                    var content = $(row[0]).text();
                    var content_id=$(row[1]).text();
                    $('#editTitle').val(content);
                    $('#editId').val(content_id);



                }
                function modelDel(ths) {
                    document.getElementById('shadow').classList.remove('hide');
                    document.getElementById('DelModal').classList.remove('hide');
                    var row = $(ths).parent().prevAll();
                    var content = $(row[0]).text();
                    $('#delTitle').val(content);

                }
                function delAjaxSend() {
                    var title=$('#delTitle').val()

                    $.ajax({
                        url:'/modal_del_class/',
                        type:'POST',
                        data:{'title':title},

                        success:function (arg) {
                            arg=JSON.parse(arg)
                            if (arg.status){
                                location.reload()
                            }else{
                                alert(arg.message)
                            }

                        }
                    })

                }

                function editAjaxSend() {
                    var nid=$('#editId').val()
                    var content=$('#editTitle').val()
                    console.log(nid,content)
                    $.ajax(
                        {
                            url:'/modal_edit_class/',
                            type:'POST',
                            data:{'nid': nid,'title':content},
                            //发送成功回调
                            success:function (arg) {
                                arg=JSON.parse(arg);


                                if (arg.status){
                                    location.reload();

                                }else{
                                    alert(arg.message)

                                }


                            }

                        }
                    )

                }
            </script>
{% endblock %}